<template>
  <div class="scroll"
       v-infinite-scroll="loadMore"
       infinite-scroll-disabled="infiniteScrollDisabled"
       infinite-scroll-distance="infiniteScrollDistance"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd">
    <mt-loadmore :top-method="loadTop" ref="loadmore" :distanceIndex="distanceIndex" :maxDistance="90">
      <slot></slot>
    </mt-loadmore>
    <div class="scroll-load" v-if="loadingText">
      <template v-if="!loadingEnd">
        <loading></loading>
      </template>
      <template v-else>
        没有更多了~
      </template>
    </div>
  </div>
</template>

<script>
  import loading from '@/components/loading/loading';
  export default {
    props: {
      // 是否可以底部加载
      loading: {
        type: Boolean,
        default: true
      },
      // 是否显示底部加载文字
      loadingText: {
        type: Boolean,
        default: true
      },
      // 是否加载完毕
      loadingEnd: {
        type: Boolean,
        default: false
      },
      // 设置超大数字可以关闭上拉 例:2000000
      distanceIndex: {
        type: Number,
        default: 2
      },
      // 触发加载方法的滚动距离阈值
      infiniteScrollDistance: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {}
    },
    computed: {
      infiniteScrollDisabled(){
        return !this.loading;
      }
    },
    methods: {
      // 上拉触发事件
      loadTop() {
        this.$emit('loadTop');
      },
      // 归位上拉效果
      loadTopEnd(){
        this.$refs.loadmore.onTopLoaded();
      },
      // 下拉触发事件
      loadMore() {
        this.$emit('loadMore');
      },
      // 优化左右滑动,触发下拉
      onTouchStart(e) {
        this.pageX1 = e.touches[0].pageX;
        this.pageY1 = e.touches[0].pageY;
      },
      onTouchMove(e) {
        this.pageX2 = e.touches[0].pageX;
        this.pageY2 = e.touches[0].pageY;
        let moveX = Math.abs(this.pageX2 - this.pageX1);
        let moveY = Math.abs(this.pageY2 - this.pageY1);
        if(moveX >= moveY){
          this.downIndex = 100000;
        }
      },
      onTouchEnd() {
        this.downIndex = this.distanceIndex;
      }
    },
    components: {
      loading
    }
  }
</script>

<style scoped lang="less">
  .scroll-load{
    font-size: 14px;
    padding: 8px 0;
    text-align: center;
  }
</style>
